/**
 * @fileoverview Select screen for Coding in Chrome editor.
 *
 * @license Copyright 2015 The Coding with Chrome Authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * @author mbordihn@google.com (Markus Bordihn)
 */
{namespace cwc.soy.Dialog autoescape="strict"}


/**
 * Dialog template.
 */
{template .template}
  {@param prefix: string}

  <dialog id="{$prefix}chrome"></dialog>
{/template}


/**
 * Default content template.
 */
{template .contentTemplate}
  {@param prefix: string}
  {@param title: string}
  {@param content: string}
  {@param i18n: bool}
  {@param? opt_css_class: string}
  {@param? opt_title_icon: string}
  {@param? opt_title_untranslated: string}

  {call .dialogTitle_ data="all" /}
  <div id="{$prefix}content" class="_content{if $opt_css_class} {$opt_css_class}{/if}">
    {$content}
  </div>
  <div id="{$prefix}buttons" class="_actions">
    <button id="{$prefix}close" type="button" class="_button _button--raised close">
      {call .text_ data="all"}
        {param text: 'Close' /}
        {param text_id: '@@GENERAL__CLOSE' /}
      {/call}
    </button>
  </div>
{/template}


/**
 * Alert template.
 */
{template .alertTemplate}
  {@param prefix: string}
  {@param title: string}
  {@param content: string}
  {@param i18n: bool}
  {@param? opt_css_class: string}
  {@param? opt_title_icon: string}
  {@param? opt_title_untranslated: string}

  {call .dialogTitle_ data="all" /}
  <div class="_content{if $opt_css_class} {$opt_css_class}{/if}">
    {$content}
  </div>
  <div class="_actions">
    <button id="{$prefix}ok" type="button" class="_button _button--raised _button--colored">
      {call .text_ data="all"}
        {param text: 'Ok' /}
        {param text_id: '@@GENERAL__OK' /}
      {/call}
    </button>
  </div>
{/template}


/**
 * Action / Cancel template.
 */
{template .actionCancelTemplate}
  {@param prefix: string}
  {@param title: string}
  {@param content: string}
  {@param i18n: bool}
  {@param? opt_css_class: string}
  {@param? opt_title_icon: string}
  {@param? opt_title_untranslated: string}
  {@param? opt_values: string}

  {call .dialogTitle_ data="all" /}
  <div class="_content{if $opt_css_class} {$opt_css_class}{/if}">
    {$content}
  </div>
  <div class="_actions">
    <button id="{$prefix}action" type="button" class="_button _button--raised">
      {msg desc=""}{$opt_values}{/msg}
    </button>
    <button id="{$prefix}cancel" type="button" class="_button _button--raised close">
      {call .text_ data="all"}
        {param text: 'Cancel' /}
        {param text_id: '@@GENERAL__CANCEL' /}
      {/call}
    </button>
  </div>
{/template}

/**
 * Prompt template.
 */
{template .promptTemplate}
  {@param prefix: string}
  {@param title: string}
  {@param content: string}
  {@param i18n: bool}
  {@param? opt_css_class: string}
  {@param? opt_title_icon: string}
  {@param? opt_title_untranslated: string}
  {@param? opt_values: string}

  {call .dialogTitle_ data="all" /}
  <div class="_content {$prefix}prompt{if $opt_css_class} {$opt_css_class}{/if}">
    {if $content}<span class="{$prefix}prompt-content">{$content}</span>{/if}
    <div class="_textfield">
      <input class="_textfield__input" type="text" id="{$prefix}input" value="{if $opt_values}{$opt_values}{/if}">
      <label class="_textfield__label" for="{$prefix}input"></label>
    </div>
  </div>
  <div class="_actions">
    <button id="{$prefix}ok" type="button" class="_button _button--raised _button--colored">
      {call .text_ data="all"}
        {param text: 'Ok' /}
        {param text_id: '@@GENERAL__OK' /}
      {/call}
    </button>
    <button id="{$prefix}cancel" type="button" class="_button _button--raised close">
      {call .text_ data="all"}
        {param text: 'Cancel' /}
        {param text_id: '@@GENERAL__CANCEL' /}
      {/call}
    </button>
  </div>
{/template}


/**
 * Dialog title
 */
{template .dialogTitle_ private="true"}
  {@param title: string}
  {@param? opt_title_icon: string}
  {@param? opt_title_untranslated: string}

  <h3 class="_title">
    {if $opt_title_icon}<i class="material-icons">{$opt_title_icon}</i>{/if}
    {msg desc=""}{$title}{/msg}
    {$opt_title_untranslated}
  </h3>
{/template}


/**
 * Return translated text or fallback. 
 */
{template .text_ private="true"}
  {@param i18n: bool}
  {@param text: string}
  {@param text_id: string}

  {if $i18n and $text_id}
    {msg desc=""}{$text_id}{/msg}
  {else}
    {$text}
  {/if}
{/template}
